<template>
    <div style="position: relative;top: -10px">
      <el-row height="30px">
        <el-col :span="15" :offset="4">
      <el-button type="primary" style="float: right;">选择商品</el-button>
        </el-col>
      </el-row>
      <div style="height: 10px"></div>
      <el-row height="600px">
        <el-col :span="6" :offset="4">
          <el-form :model="formInline" label-width="100px" style="width: 380px">
            <el-form-item label="采购单号：">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="采购门店：">
              <el-input v-model="formInline.region"></el-input>
            </el-form-item>
            <el-form-item label="采购人员：">
              <el-input v-model="formInline.region"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form :model="formInline" label-width="100px" style="width: 380px">
            <el-form-item label="审核状态：">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="供应商：">
              <el-input v-model="formInline.region"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="formInline.region"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row height="500px">
        <el-col :span="15" :offset="4">
      <el-table
        :data="tableData"
        border
        height="281"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%;">
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          label="编码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="单位">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="采购数量">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="采购单价">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="小计金额">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="70">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
        </el-col>
      </el-row>
      <el-row height="100px">
        <el-col :span="15" :offset="4">
          <div style="width: 100%;height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <label style="float: right;line-height: 30px;position: relative;right: 80px">其他金额：</label><br>
            <label style="float: right;line-height: 50px;">优惠金额：</label><br>
            <label style="float: right;line-height: 70px;position: relative;left: 80px">采购金额：</label>
          </div>
        </el-col>
      </el-row>
        <el-row height="30px">
          <el-col :span="15" :offset="4">
            <el-card class="box-card">
              <div style="height: 40px">
                制单人员：<el-input
                  placeholder="请输入内容"
                  v-model="input"
                style="width: 100px">
                </el-input>
                制单日期：<el-input
                  placeholder="请输入内容"
                  v-model="input"
                  style="width: 150px">
                </el-input>
                审核人员：<el-input
                  placeholder="请输入内容"
                  v-model="input"
                  style="width: 100px">
                </el-input>
                审核日期：<el-input
                  placeholder="请输入内容"
                  v-model="input"
                  style="width: 150px">
                </el-input>
              </div>
            </el-card>
          </el-col>
        </el-row>
      <el-row height="30px">
        <el-col :span="15" :offset="4">
          <el-button type="primary" style="float: left;">保存</el-button>
          <el-button type="primary" style="float: left;">取消</el-button>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "Inc_purchase_order",
        data() {
        return {
          formInline: {
            user: '',
            region: ''
          },
          input: 'aaaa',
          tableData: [{
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          }, {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          }, {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          }, {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          }]
        };
      },
      methods:{
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总价';
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = 'N/A';
            }
          });

          return sums;
        }
      }
    }
</script>

<style scoped>

</style>
